﻿<phone:PhoneApplicationPage
    x:Class="BlogApp.WP8.View.SearchPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:utils="clr-namespace:BlogApp.WP8.Utils"
    SupportedOrientations="Portrait" Orientation="Portrait"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="True"
    DataContext="{Binding SearchViewModel, Source={StaticResource Locator}}">

    <phone:PhoneApplicationPage.FontFamily>
        <StaticResource ResourceKey="PhoneFontFamilyNormal"/>
    </phone:PhoneApplicationPage.FontFamily>
    <phone:PhoneApplicationPage.FontSize>
        <StaticResource ResourceKey="PhoneFontSizeNormal"/>
    </phone:PhoneApplicationPage.FontSize>
    <phone:PhoneApplicationPage.Foreground>
        <StaticResource ResourceKey="PhoneForegroundBrush"/>
    </phone:PhoneApplicationPage.Foreground>
    <phone:PhoneApplicationPage.Background>
        <StaticResource ResourceKey="BackgroundBrush"/>
    </phone:PhoneApplicationPage.Background>

    <shell:SystemTray.ProgressIndicator>
        <shell:ProgressIndicator IsIndeterminate="{Binding IsLoading}" 
                                 IsVisible="{Binding IsLoading}" />
    </shell:SystemTray.ProgressIndicator>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="{StaticResource BackgroundBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel Grid.Row="0" Margin="12,17,0,0">
            <TextBlock Text="{Binding LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}" Style="{StaticResource PhoneTextNormalStyle}" Foreground="{StaticResource AccentBrush}"/>
            <TextBlock Text="{Binding LocalizedResources.SearchPageTitle, Source={StaticResource LocalizedStrings}}" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" Foreground="{StaticResource AccentBrush}"/>
        </StackPanel>

        <Grid Grid.Row="1" Margin="12,0,12,12">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="auto"/>
            </Grid.ColumnDefinitions>
            <TextBox x:Name="searchQuery" HorizontalAlignment="Stretch" Grid.Column="0" Grid.ColumnSpan="2" BorderBrush="{StaticResource AccentBrush}" KeyUp="SearchQuery_OnKeyUp">
                <TextBox.InputScope>
                    <InputScope>
                        <InputScopeName NameValue="Search" />
                    </InputScope>
                </TextBox.InputScope>
            </TextBox>
            <Button BorderThickness="0" Grid.Column="1" Command="{Binding SearchPostWithQuery}" CommandParameter="{Binding Text, ElementName=searchQuery}" >
                <Image Source="/Assets/appbar.search.black.png" />
            </Button>
        </Grid>

        <TextBlock Grid.Row="1" Text="{Binding SearchResultString}"  Style="{StaticResource PhoneTextNormalStyle}" Foreground="{StaticResource AccentBrush}" VerticalAlignment="Bottom" Margin="24, 0, 12, -12"/>
        
        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="2" Margin="12,24,12,0" >
            <phone:LongListSelector toolkit:TiltEffect.IsTiltEnabled="True" ItemsSource="{Binding SearchResults.Posts}" Style="{StaticResource LongListSelectorStyle}">
                <i:Interaction.Behaviors>
                    <utils:IncrementalLoadingBehavior LoadCommand="{Binding SearchViewModel.LoadMoreItems, Source={StaticResource Locator}}" />
                </i:Interaction.Behaviors>
                <phone:LongListSelector.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Vertical" Tap="OnArticleTapped"  Margin="0,0,0,12">
                            <TextBlock Text="{Binding TitlePlain, Converter={StaticResource UnicodeToTextConverter}}" Style="{StaticResource PhoneTextNormalStyle}" FontSize="{StaticResource PhoneFontSizeMedium}" Foreground="{StaticResource AccentBrush}" TextWrapping="Wrap" TextTrimming="WordEllipsis" />
                            <TextBlock Text="{Binding Excerpt, Converter={StaticResource UnicodeToTextConverter}}" Style="{StaticResource PhoneTextNormalStyle}" FontSize="{StaticResource PhoneFontSizeSmall}" TextTrimming="WordEllipsis" TextWrapping="Wrap" Foreground="{StaticResource TeaserTextBrush}"/>
                        </StackPanel>
                    </DataTemplate>
                </phone:LongListSelector.ItemTemplate>
            </phone:LongListSelector>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>